<template>
    <div class="card">
        <div class="card-left" :style="{'background-color':card.color}">
            <img class="img" :src="card.imgUrl" alt="">
        </div>
        <div class="card-right">
            <div class="top">{{ card.textTop }}</div>
            <div class="mid">{{ card.textMid }}</div>
            <div class="bot">{{card.textContent}}<span class="tip">{{ card.textTip }}</span></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const props = defineProps({
    card: Object
})


</script>
<style lang="scss" scoped>
.card:hover {
    box-shadow: 1px 1px 1px #555;
}

.card {
    border: solid 1px #ccc;
    box-shadow: 1px 1px 1px #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
	box-sizing: border-box;
    color: #555;
    font-size: 14px;

    .card-left {
        width: 55px;
        height: 55px;
        display: flex;
        border-radius: 50%;
        justify-content: center;
        align-items: center;

        .img {
            width: 30px;
            height: 30px;
            display: inline-flex
        }
    }

    .card-right {
		margin-left: 20px;
        line-height: 25px;
        .mid {
            color: #000;
            font-size: 20px;
            font-weight: bold;
        }

        .bot {
            .tip {
                color: green;
            }
        }
    }
}
</style>
